<template>
  <div class="work_permit">
    <div class="work_permit_title">
      <span class="title">我的日程</span>
      <!-- <span>（ 会议/值班/排班/任务 ）</span> -->
      <span class="look_all" @click="lookAll">查看全部</span>
    </div>
    <div class="current_data">
      <span class="current_change">{{ changeToday }}</span>
      <span @click="returnToday" class="return_today">回到今日</span>
    </div>
    <div class="calendar">
      <i @click="lastWeek" class="icon el-icon-arrow-left"></i>
      <li v-for="(item, index) in weeks" :key="index">
        <p>{{ item }}</p>
        <p
          @click="changeTime(weekDates[index])"
          :class="changeToday == weekDates[index] ? 'dates dates1' : 'dates'"
        >
          {{ weekDates[index].split("-")[2] }}
          <span
            class="mark"
            v-if="DateList.indexOf(weekDates[index]) != -1"
          ></span>
        </p>
      </li>
      <i @click="nextWeek" class="icon el-icon-arrow-right"></i>
    </div>
    <div class="task_list_div">
      <div
        class="task_list"
        v-for="(item, index) in taskList"
        :key="index"
        @contextmenu.prevent="onRightClick($event, item)"
      >
        <div class="task_time">
          <img src="@/assets/images/time.png" alt="" />
          <p>{{ item.time }}</p>
        </div>
        <div class="line"></div>
        <div class="task_content">
          <p style="color: var(--word-2)">{{ item.title }}</p>
          <div
            :class="
              item.type == 1
                ? 'task_tag task_tag1'
                : item.type == 2
                ? 'task_tag task_tag2'
                : item.type == 3
                ? 'task_tag task_tag3'
                : 'task_tag task_tag4'
            "
            style="margin-top: 10px"
          >
            <span>{{
              item.type == 1
                ? "会议"
                : item.type == 2
                ? "值班"
                : item.type == 3
                ? "排班"
                : "任务"
            }}</span>
          </div>
        </div>
      </div>
      <!-- <div class="task_list">
        <div class="task_time">
          <img src="@/assets/images/time.png" alt="" />
          <p>08:30</p>
        </div>
        <div class="line"></div>
        <div class="task_content">
          <p style="color: var(--word-2)">设备子系统产品评审会</p>
          <div class="task_tag1" style="margin-top: 10px">
            <span>值班</span>
          </div>
        </div>
      </div> -->
    </div>
    <div class="add_schedule" @click="addSchedule">
      <i class="el-icon-plus"></i>
      <span>添加日程</span>
    </div>
    <el-dialog
      title="添加日程"
      append-to-body
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500px"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="日程名称" prop="title">
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入日程名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="日程时间" prop="time">
            <el-time-select
              style="width: 100%"
              v-model="ruleForm.time"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '17:30',
              }"
              placeholder="选择时间"
            >
            </el-time-select>
          </el-form-item>
          <el-form-item label="日程类型" prop="type">
            <el-select
              style="width: 100%"
              v-model="ruleForm.type"
              placeholder="请选择日程类型"
            >
              <el-option label="会议" value="1"></el-option>
              <el-option label="值班" value="2"></el-option>
              <el-option label="排班" value="3"></el-option>
              <el-option label="任务" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日程内容" prop="content">
            <el-input type="textarea" v-model="ruleForm.content"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  createRemind,
  getRemindList,
  editRemind,
  lookRemind,
  completeRemind,
  delRemind,
  getDateList,
} from "@/api/home.js";
export default {
  data() {
    return {
      weekDates: [],
      weeks: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      changeToday: "",
      dialogVisible: false,
      taskList: [],
      DateList: [],
      signId: "",
      ruleForm: {
        title: "",
        time: "",
        type: "",
        content: "",
      },
      rules: {
        title: [{ required: true, message: "请输入日程名称", trigger: "blur" }],
        time: [
          { required: true, message: "请选择日程时间", trigger: "change" },
        ],
        // type: [
        //   { required: true, message: "请选择日程类型", trigger: "change" },
        // ],
      },
      contextMenuData: [
        {
          label: "编辑",
          icon: "iconfont el-icon-edit-outline",
          onClick: () => {
            this.addSign();
          },
        },
        {
          label: "完成",
          onClick: () => {
            this.updateDel();
          },
        },
        {
          label: "删除本条",
          onClick: () => {
            this.handleDel();
          },
        },
      ],
    };
  },
  created() {
    this.weekDates = this.getCurrentWeekDates();
    this.changeToday = this.jsbos.toDate(new Date(), "yyyy-MM-dd");
    this.getRemindListFn();
  },
  methods: {
    getCurrentWeekDates() {
      let currentDate = new Date();
      let currentDay = currentDate.getDay(); // 获取今天是星期几，0表示星期日，1表示星期一，以此类推
      let startOfWeek = new Date(currentDate); // 用当前日期创建一个新的Date对象
      startOfWeek.setDate(currentDate.getDate() - currentDay); // 获取本周的第一天

      let weekDates = []; // 存储本周的日期
      for (let i = 1; i < 8; i++) {
        let newDate = new Date(startOfWeek);
        newDate.setDate(startOfWeek.getDate() + i);
        weekDates.push(this.jsbos.toDate(newDate, "yyyy-MM-dd"));
      }
      return weekDates;
    },
    changeTime(date) {
      this.changeToday = date;
      this.getRemindListFn();
    },
    returnToday() {
      this.changeToday = this.jsbos.toDate(new Date(), "yyyy-MM-dd");
      this.weekDates = this.getCurrentWeekDates();
      this.getRemindListFn();
    },
    lastWeek() {
      let dateArr = [];
      this.weekDates.forEach((item) => {
        let timeStamp1 = new Date(item);
        let timeStamp2 = new Date(item);
        dateArr.push(
          this.jsbos.toDate(
            timeStamp2.setDate(timeStamp1.getDate() - 7),
            "yyyy-MM-dd"
          )
        );
      });
      this.weekDates = dateArr;
      console.log(this.weekDates);
    },
    nextWeek() {
      let dateArr = [];
      this.weekDates.forEach((item) => {
        let timeStamp1 = new Date(item);
        let timeStamp2 = new Date(item);
        dateArr.push(
          this.jsbos.toDate(
            timeStamp2.setDate(timeStamp1.getDate() + 7),
            "yyyy-MM-dd"
          )
        );
      });
      this.weekDates = dateArr;
      console.log(this.weekDates);
    },
    addSchedule() {
      this.signId = "";
      this.ruleForm = {
        title: "",
        time: "",
        type: "",
        content: "",
      };
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = this.ruleForm;
          obj.startTime = new Date(this.changeToday + " " + obj.time).getTime();
          console.log(obj);
          if (!this.signId) {
            createRemind(obj).then((res) => {
              this.getRemindListFn();
              this.dialogVisible = false;
            });
          } else {
            editRemind(obj).then((res) => {
              this.getRemindListFn();
              this.dialogVisible = false;
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getRemindListFn() {
      let obj = {
        currentDate: this.changeToday,
        state: "0",
      };
      getRemindList(obj).then((res) => {
        this.taskList = res.data.list;
      });
      getDateList({ currentDate: this.changeToday }).then((res) => {
        this.DateList = [];
        res.data.forEach((item) => {
          this.DateList.push(this.jsbos.toDate(item, "yyyy-MM-dd"));
        });
        console.log(this.DateList);
      });
    },
    onRightClick(event, item) {
      console.log(item);
      console.log("鼠标右键被点击");
      // this.signId = undefined;
      //赋值id
      this.signId = item.id;
      this.$contextmenu({
        items: this.contextMenuData,
        event, // 鼠标事件信息
        customClass: "custom-class", // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 140, // 主菜单最小宽度
      });
      return false;
    },
    addSign() {
      this.dialogVisible = true;
      lookRemind(this.signId).then((res) => {
        this.ruleForm = res.data;
        console.log(this.jsbos.toDate(res.data.startTime, "hh:mm"));
        this.ruleForm.time = this.jsbos.toDate(res.data.startTime, "hh:mm");
      });
    },
    updateDel() {
      lookRemind(this.signId).then((res) => {
        this.ruleForm = res.data;
        console.log(this.jsbos.toDate(res.data.startTime, "hh:mm"));
        this.ruleForm.time = this.jsbos.toDate(res.data.startTime, "hh:mm");
      });

      this.$confirm("您确定要完成当前日程吗, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.ruleForm.state = "1";
          completeRemind(this.ruleForm).then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              customClass: "myClass",
            });
            this.getRemindListFn();
            // this.visible = false
          });
        })
        .catch(() => {});
    },
    handleDel() {
      this.$confirm("您确定要删除当前日程吗, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          delRemind(this.signId).then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              customClass: "myClass",
            });
            this.getRemindListFn();
            // this.visible = false
          });
        })
        .catch(() => {});
    },
    lookAll() {
      this.$router.push({
        path: "/extend/scheduleList",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.work_permit {
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 8px;
  font-size: 14px;
  background-color: #fff;
  .work_permit_title {
    .title {
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      line-height: 24px;
    }
  }
  .current_data {
    margin-top: 25px;
    .current_change {
      color: var(--word-2);
    }
    .return_today {
      float: right;
      color: var(--blue);
      font-size: 14px;
      cursor: pointer;
    }
  }
  .calendar {
    margin-top: 30px;
    padding-bottom: 10px;
    overflow: hidden;
    li {
      list-style: none;
      float: left;
      width: 13%;
      text-align: center;
      position: relative;
    }
    .dates {
      position: relative;
      cursor: pointer;
      height: 26px;
      width: 26px;
      margin: auto;
      margin-top: 10px;
      border-radius: 15px;
      padding: 4px;
      box-sizing: border-box;
    }
    .dates1 {
      background-color: var(--light-blue);
    }
    .dates:hover {
      background-color: var(--light-blue);
    }
    .icon {
      // display: inline-block;
      float: left;
      width: 4.5%;
      line-height: 40px;
      background-color: #f4f4f5;
      position: relative;
      top: 3px;
      text-align: center;
      border-radius: 3px;
      cursor: pointer;
    }
    .icon:hover {
      background-color: var(--light-blue);
    }
  }
  .task_list_div {
    margin-top: 20px;
    .task_list {
      padding: 15px 0;
      border-bottom: 1px dashed var(--border-3);
      .line {
        display: inline-block;
        width: 1px;
        height: 40px;
        background-color: var(--border-2);
        margin: 0 30px;
      }
      .task_time {
        display: inline-block;
        text-align: center;
        img {
          margin-bottom: 5px;
        }
        p {
          color: var(--word-2);
        }
      }
      .task_content {
        display: inline-block;
        .task_tag {
          font-size: 12px;
          display: inline-block;
          // color: var(--blue);
          // background-color: var(--light-blue);
          padding: 2px 5px;
          border-radius: 3px;
        }
        .task_tag1 {
          color: var(--blue);
          background-color: var(--light-blue);
        }
        .task_tag2 {
          color: var(--purple);
          background-color: var(--light-purple);
        }
        .task_tag3 {
          color: var(--green);
          background-color: var(--light-green);
        }
        .task_tag4 {
          color: var(--orange);
          background-color: var(--light-orange);
        }
      }
    }
  }
  .add_schedule {
    width: 100%;
    height: 42px;
    cursor: pointer;
    line-height: 42px;
    margin-top: 30px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 4px 4px 4px 4px;
    i {
      margin-right: 5px;
    }
  }
  .add_schedule:hover {
    background-color: var(--light-blue);
  }
  .mark {
    display: inline-block;
    position: absolute;
    width: 6px;
    height: 6px;
    bottom: -8px;
    left: 10px;
    border-radius: 6px;
    background-color: var(--red);
  }
  .look_all {
    float: right;
    cursor: pointer;
    color: var(--word-3);
  }
  .look_all:hover {
    color: var(--blue);
  }
}
</style>
